<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
			<style type="text/css">
				img{
					width: 100%;
					height: 100%;
				}
				#oul{
					position: absolute;
					margin: 0px;
					padding: 0px;
					height: 400px;
					left: -800px;
					
				}
				.odiv{
					overflow: hidden;
					position: relative;
					margin: 0px auto;
					width:800px;
					height:400px;
				}
				#oul>li{
					float: left;
					width: 800px;
					height: 100%;
					list-style: none;
				}
				#two{
					position: absolute;
					z-index: 1;
					list-style: none;
				}
				#two>li{
					background-color:red ;
					width: 10px;
					height: 10px;
					border-radius:10px ;
					display: inline-block;
					
				}
			</style>
			<script type="text/javascript">
				var odiv;
				var oul;
				var seep =10;
				var item;
				function lunbo(){
					
				
					if(oul.offsetLeft>0){
						if(seep>0){
						oul.style.left=-oul.offsetWidth/4+'px';
						}
						console.log(-oul.offsetWidth/4);
					}else if(oul.offsetLeft<-oul.offsetWidth/4){
						if(seep<0){
							oul.style.left=0+'px';
						}
						
					}
						oul.style.left=oul.offsetLeft+seep+'px';
					
				}
				window.onload =function(){
					$('#oul li').push('1sadsads1');
					odiv = document.getElementById('odi');
					oul =document.getElementById('oul');
					oul.innerHTML=oul.innerHTML+oul.innerHTML;
					oul.style.width=$('#oul li').length*2*800+'px';
					item=setInterval(lunbo,30);
					$('#btn1').click(function(){
						seep =-1;
					})
					$('#btn2').click(function(){
						seep =1;
					})
					$('#oul li').mousemove(function(){
						clearInterval(item);
					})
					$('#oul li').mouseout(function(){
						item=setInterval(lunbo,30);
					})
				}
			</script>
	</head>
	<body>
		
		<div class="odiv" id="odi">
		<button id="btn1"><</button><button id="btn2">></button>
		<ul id="oul">
			<li><img src="Bootstrap 3.3.5（环境）2.19-3.20/img/050E00005C8F71A0859B5D1FBD0B5A6A.jpg"/></li>
			<li><img src="Bootstrap 3.3.5（环境）2.19-3.20/img/lunbo2.jpg"/></li>
			<li><img src="购物车/img/sharpen,100.jpg"/></li>
			<li><img src="js-demo/JS运动中级/记录/幻灯片——上下滑动/images/3.jpg"/></li>
		</ul>
		<ul id="two">
			<li></li>
			<li></li>
			
			<li></li>
			<li></li>
			<li></li>
		</ul>
		</div>
	</body>
</html>
